<template>
  <!-- 双括号语法 -->
  <h1>{{ msg }}</h1>
  <h1>{{ msg.split('').reverse().join('') }}</h1>
  <!-- 表达式 -->
  <h1 :id="msg.split('').reverse().join('')"></h1>
  <!-- 三目表达式 -->
  <div>{{ color === 'red' ? '开心' : '难过' }}</div>


</template>

<script>
// 声明式
export default {
  name: 'App',
  data() {
    return {
      msg: 'helloworld',
      color: 'red'
    }
  }
}
</script>

<style>
#d1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>